<template>
  <div>
    <!-- 导航条 -->
    <nav-bar>
      <div slot="left">返回</div>
      <div slot="title">注册页</div>
    </nav-bar>

    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <!-- 用户名 -->
      <van-field
        v-model="formData.username"
        name="name"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

      <!-- 密码 -->
      <van-field
        v-model="formData.password"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <!-- 邮箱 -->
      <van-field
        v-model="formData.email"
        center
        clearable
        label="邮箱"
        placeholder="请输入邮箱"
        name="email"
      >
        <template #button>
          <van-button :disabled="isDisabled" size="small" type="primary" native-type="button" @click="sendCode"
            >{{delayTime === num ? '发送验证码' : ( delayTime + "秒")}}</van-button
          >
        </template>
      </van-field>

      <!-- 验证码 -->
      <van-field
        v-model="formData.code"
        name="code"
        label="验证码"
        placeholder="验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />

      <!-- 电话号码 -->
      <van-field
        v-model="formData.phone"
        name="phone"
        label="电话"
        placeholder="电话"
        :rules="[{ required: true, message: '请填写电话' }]"
      />

      <!-- 性别 -->
      <van-field name="sex" label="性别">
        <template #input>
          <van-radio-group v-model="formData.sex" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 生日 -->
      <van-field
        readonly
        clickable
        name="birth"
        :value="formData.birth"
        label="生日"
        placeholder="点击选择时间"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="onConfirm"
          @cancel="showPicker = false"
          title="选择年月日"
        />
      </van-popup>

      <!-- 提交按钮 -->
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      showPicker: false, //是否显示时间选择器
      isDisabled:false,//是否禁用
      delayTime:5,//倒计时时间
      num:5,//固定的数字
      timeHanlder:"",//时间句柄
    };
  },
  methods: {
    API_sendCode(email) {
      //发送验证码接口
      return this.$utils.$http.request({
        url: "sendCode",
        method: "POST",
        data: {
          email,
        },
      });
    },
    API_register(data){
      return this.$utils.$http.request({
        url:"register",
        method:"POST",
        data
      })
    },
    async sendCode() {
      //发送验证码
      if(this.formData.email){
        this.isDisabled = true

        let res = await this.API_sendCode(this.formData.email)
        console.log(res)

        this.timeHanlder = setInterval(()=>{
          
          if(this.delayTime <= 0){
            this.delayTime = this.num
            clearInterval(this.timeHanlder)
            this.isDisabled = false
          }else{
            this.delayTime--
          }
        },1000)
      }else{
        this.$toast.fail('请填写邮箱');
      }
    },
    onConfirm(time) {
      this.formData.birth = this.formDate(time)
      this.showPicker = false;
    },
    formDate(time){//格式化日期
      let year = time.getFullYear()
      let month = time.getMonth()+1
      let date = time.getDate()
      function formTime(num){
        let str = String(num)
        return str.length >= 2 ? str : 0 + str
      }
      return `${year}-${formTime(month)}-${formTime(date)}`
    },
    async onSubmit(values) {//提交表单
      let res = await this.API_register(values)
      if(res.data.code === 1000){
        this.$toast.success(res.data.msg)
        this.$router.push("/login")
      }else{
        this.$toast.fail(res.data.data)
      }
    },
  }
};
</script>

<style></style>
